<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
    </style>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>

<script>
    window.onload = (ev) =>{
        //利用原生的JavaScript
        var div1 = document.getElementsByTagName("div")[0];
        var div2 = document.getElementsByClassName("box1")[0];
        var div3 = document.getElementById("box2");


        // div1.style.background = "red";
        // div2.style.background = "blue";
        // div3.style.background = "yellow";
    }


    $(function () {
        var $div = $("div");
        var $div1 = $(".box1");
        var $div2 = $("#box2");

        $div.css({
            background:"yellow"
        });

        $div1.css({
            background:"red"
        });
        $div2.css({
            background:"blue"
        });

    });
</script>
</body>
</html>